<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div id="login">
  <!-- header start -->
  <!-- end  -->
  <div class="login_con_wper">
    <div class="login_con px1000 ">
      <div class="lg_section clearfix">
        <div class="lg_section_l fl">
          <img src="../assets/images/lg_bg02.png">
        </div>
        <!-- end l -->
        <div class="lg_section_r fl">
          <h2 class="lg_sec_tit clearfix">
            <span class="fl">登录</span>
            <em class="fr">没有帐号，<a href="register.vue">立即注册</a></em>
          </h2>
          <form>
            <fieldset>
              <p class="mt20">
                <input type="text" placeholder="用户名/手机" class="lg_input01 lg_input" v-model="uname" required>
              </p>
              <p class="mt20">
                <input type="text" placeholder="密码" class="lg_input02 lg_input" v-model="pwd" required>
              </p>
              <p style="color: red">{{msg}}</p>
              <p class="clearfix lg_check"><span class="fl"><input type="checkbox" v-model="checked">记住用户名</span><a href="#" class="fr">忘记密码？找回</a></p>
              <p><a href="javascript:void (0)" v-on:click.prevent="checklogin" class="lg_btn">立即登陆</a></p>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- footer start -->

  <!-- footer end -->
  </div>
</template>
<script>
  import bus from "../assets/eventBus"
    export default {
      name: "login",
      data(){
        return{
          uname:"",
          pwd:"",
          msg:"",
          checked:true
        }
      },
      methods: {
        checklogin: function () {
          this.axios.post("/api/user/checklogin",{
            userAccount:this.uname,userPassword:this.pwd
          }).then((data)=>{
            if(data.data!=""){
              if (this.checked) {
                // 传入账号名，密码，和保存天数3个参数
                this.setCookie(this.uname, this.pwd, 7)
              } else {
                // 如果没有选中自动登录，那就清除cookie
                this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了
              }
              localStorage.token=data.data.userId
              alert("登陆成功")
              window.sessionStorage.setItem("user",JSON.stringify(data.data))
              this.$emit("func","index2")
              bus.$emit("login",true)
            }else{
              this.msg="用户名或密码错误!"
            }
          })
        },
        // 设置cookie
        setCookie (name, pwd, exdays) {
          var exdate = new Date()// 获取时间
          exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)// 保存的天数
          // 字符串拼接cookie
          window.document.cookie = 'userName' + '=' + name + ';path=/;expires=' + exdate.toGMTString()
          window.document.cookie = 'userPwd' + '=' + pwd + ';path=/;expires=' + exdate.toGMTString()
        },
        // 读取cookie 将用户名和密码回显到input框中
        getCookie () {
          if (document.cookie.length > 0) {
            var arr = document.cookie.split('; ')// 这里显示的格式需要切割一下自己可输出看下
            for (var i = 0; i < arr.length; i++) {
              var arr2 = arr[i].split('=')// 再次切割
              // 判断查找相对应的值
              if (arr2[0] === 'userName') {
                this.uname = arr2[1]// 保存到保存数据的地方
              } else if (arr2[0] === 'userPwd') {
                // this.pwd = arr2[1]
                this.pwd=""
              }
            }
          }
        },
      },
      created() {
        this.getCookie()
      }
    }
</script>

<style scoped>

</style>
